<template>
    <div>
        <div class="div-right">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="ruleForm.account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        type="password"
                        v-model="ruleForm.password"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input
                        type="password"
                        v-model.trim="ruleForm.checkPass"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="身份" prop="userType">
                    <el-select v-model="ruleForm.userType" placeholder="请选择身份">
                        <el-option label="学生" value="0"></el-option>
                        <el-option label="老师" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="ruleForm.gender" placeholder="请选择性别">
                        <el-option label="女" value="0"></el-option>
                        <el-option label="男" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model.trim="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="emailCode">
                    <el-input v-model.trim="ruleForm.emailCode">
                        <el-button slot="append" type="info" round @click="getEmailCode"
                        >获取验证码
                        </el-button
                        >
                    </el-input
                    >
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">
                        立即注册
                    </el-button
                    >
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        var checkEmailCode = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入验证码"));
            } else {
                callback();
            }
        };
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }

            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
            } else {
                if (value > 150 || value < 0) {
                    callback(new Error('年龄必须在0-150岁之间'));
                } else {
                    callback();
                }
            }

        };
        return {
            ruleForm: {
                account: "",
                age: "",
                userType: "",
                gender: "",
                name: "",
                password: "",
                email: "",
                // 邮箱验证码
                emailCode: "",
                checkPass: "",
            },
            rules: {
                account: [
                    {
                        pattern: /^[a-zA-Z][a-zA-Z0-9]{5,50}$/,
                        message: "必须以字母开头，不能有数字，字母之外的字符，且长度为6-50",
                        trigger: "blur",
                        required: true,
                    },
                ],
                password: [
                    {
                        pattern: /^[a-zA-Z0-9_*]{6,50}$/,
                        message: "长度在 6 到 50 个字符",
                        trigger: "blur",
                        required: true,
                    },
                ],
                age: [
                    {validator: checkAge, required: true, trigger: 'blur'}
                ],
                checkPass: [{validator: validatePass2, required: true, trigger: "blur"}],
                userType: [
                    {required: true, message: "请选择身份类别", trigger: "change"},
                ],
                gender: [{required: true, message: "请选择性别", trigger: "change"}],
                name: [{required: true, message: "输入你的姓名", trigger: "change"}],
                email: [
                    {
                        required: true,
                        pattern: /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/,
                        message: "请填写你的邮箱",
                        trigger: "blur",
                    },
                ],
                emailCode: [
                    {validator: checkEmailCode, required: true, trigger: "blur"},
                ],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.post("/register", jsonstr, {
                            headers: {
                                "Content-Type": "application/json",
                            },
                        })
                        .then((resp) => {
                            const str = resp.data;
                            if (200 === parseInt(str.status)) {
                                this.$alert("注册成功", {
                                    confirmButtonText: "确定",
                                    callback: (action) => {
                                        this.$message({
                                          type: 'info',
                                          message: `action: ${ action }`
                                        });
                                    },
                                });
                                this.$router.push("/");
                            } else {
                                this.$refs[formName].resetFields();
                                this.$alert("注册失败", {
                                    confirmButtonText: "确定",
                                    callback: (action) => {
                                        this.$message({
                                          type: 'info',
                                          message: `action: ${ action }`
                                        });
                                    },
                                });
                            }

                        });
                } else {
                    console.log("error!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getEmailCode() {
            const emailNumber = this.ruleForm.email;
            var reg = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$");
            let res = reg.test(emailNumber);

            if (res) {
                this.$axios.get("/getemail/" + emailNumber).then((resp) => {
                    console.log(resp);
                });
            } else {
                this.$message({
                    message: "请先输入正确的邮箱",
                    type: "error",
                });
            }
        },
    },
};
</script>

<style scoped>
</style>

